import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Keyboard,
  Modal,
  Linking,
  ScrollView,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {TextButton, LinearBoardButton} from '../../components/Button';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import LinearGradient from 'react-native-linear-gradient';
import LayoutConstants from '../../config/LayoutConstants';

//#FFCB26
class NftDetail extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {};
  }

  pressLink = (url) => {
    if (!url || url.length == 0) {
      return;
    }

    console.log(url);

    Linking.canOpenURL(url)
      .then((supported) => {
        if (!supported) {
          console.warn("Can't handle url: " + url);
        } else {
          return Linking.openURL(url);
        }
      })
      .catch((err) => console.error('An error occurred', url));
  };

  renderComponent = () => {
    let top =
      500 +
      Math.sqrt(
        Math.pow(500, 2) - Math.pow(LayoutConstants.WINDOW_WIDTH / 2, 2),
      );

    let {
      image,
      name,
      description,
      link,
      file,
    } = this.props.navigation.state.params.nft;

    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Detail"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <ScrollView style={{paddingLeft: 20, paddingRight: 20, flex: 1}}>
          <View
            style={{
              width: 1000,
              height: 1000,
              alignSelf: 'center',
              marginTop: -top,
              borderRadius: 500,
              backgroundColor: '#160231',
            }}></View>
          <Image
            style={{
              width: 90,
              height: 90,
              borderRadius: 10,
              alignSelf: 'center',
              marginTop: -30,
            }}
            source={{uri: image}}></Image>
          <Text
            style={{
              fontWeight: 'bold',
              color: '#8A7B6C',
              alignSelf: 'center',
              marginTop: 10,
            }}>
            {name}
          </Text>
          <Text
            style={{
              fontWeight: 'bold',
              fontSize: 18,
              color: '#7505F4',
              marginTop: 10,
            }}>
            File
          </Text>
          <TouchableOpacity
            activeOpacity={0.8}
            onPress={() => {
              this.pressLink(file);
            }}>
            <Text
              style={{
                color: '#4A4A4A',
                marginBottom: 10,
                fontSize: 14,
                marginTop: 10,
                textDecorationLine: 'underline',
              }}>
              {file}
            </Text>
          </TouchableOpacity>

          <Text
            style={{
              fontWeight: 'bold',
              fontSize: 18,
              color: '#7505F4',
              marginTop: 10,
            }}>
            Description
          </Text>
          <Text
            style={{
              color: '#4A4A4A',
              marginBottom: 10,
              fontSize: 14,
              marginTop: 10,
            }}>
            {description}
          </Text>
          <Text
            style={{
              fontWeight: 'bold',
              fontSize: 18,
              color: '#7505F4',
              marginTop: 10,
            }}>
            Extra Link
          </Text>
          <TouchableOpacity
            activeOpacity={0.8}
            onPress={() => {
              this.pressLink(link);
            }}>
            <Text
              style={{
                color: '#4A4A4A',
                marginBottom: 10,
                fontSize: 14,
                marginTop: 10,
                textDecorationLine: link ? 'underline' : 'none',
              }}>
              {link ? link : 'no link'}
            </Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(NftDetail);
